<template>
	<view class="container">
		<view class="header">
			<text class="title">网络请求测试</text>
		</view>
		
		<view class="section">
			<text class="section-title">GET请求示例</text>
			<view class="input-group">
				<text class="input-label">请求地址：</text>
				<input class="input" v-model="getUrl" placeholder="请输入GET请求地址" />
			</view>
			<view class="input-group">
				<text class="input-label">参数：</text>
				<textarea class="textarea" v-model="getParams" placeholder="请输入JSON格式参数" />
			</view>
			<button class="btn" type="primary" @click="sendGetRequest">发送GET请求</button>
		</view>
		
		<view class="section">
			<text class="section-title">POST请求示例</text>
			<view class="input-group">
				<text class="input-label">请求地址：</text>
				<input class="input" v-model="postUrl" placeholder="请输入POST请求地址" />
			</view>
			<view class="input-group">
				<text class="input-label">参数：</text>
				<textarea class="textarea" v-model="postParams" placeholder="请输入JSON格式参数" />
			</view>
			<button class="btn" type="primary" @click="sendPostRequest">发送POST请求</button>
		</view>
		
		<view class="section" v-if="result">
			<text class="section-title">请求结果</text>
			<view class="result-box">
				<text class="result-content">{{result}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request';
	
	export default {
		data() {
			return {
				// GET请求相关
				getUrl: 'http://t.weather.itboy.net/api/weather/city/101020100',
				getParams: '{\n  "id": 1\n}',
				
				// POST请求相关
				postUrl: 'https://docwriter-test.cas-air.cn/gw-edu/api/contact/',
				postParams: '{\n  "company_name": "11",\n  "requirements": "22",\n  "contact_name": "33",\n  "position": "44",\n  "contact_info": "55"\n}',
				
				// 请求结果
				result: ''
			}
		},
		methods: {
			// 发送GET请求
			sendGetRequest() {
				try {
					// 解析参数
					const params = this.getParams ? JSON.parse(this.getParams) : {};
					
					// 显示加载中
					this.result = '请求中...';
					
					// 发送请求
					request.get(this.getUrl, params, {
						showLoading: true,
						loadingMsg: 'GET请求中'
					})
					.then(res => {
						console.log('GET请求成功:', res);
						this.result = JSON.stringify(res, null, 2);
					})
					.catch(err => {
						console.error('GET请求失败:', err);
						this.result = '请求失败: ' + JSON.stringify(err, null, 2);
					});
				} catch (e) {
					uni.showToast({
						title: '参数格式错误，请检查JSON格式',
						icon: 'none'
					});
				}
			},
			
			// 发送POST请求
			sendPostRequest() {
				try {
					// 解析参数
					const params = this.postParams ? JSON.parse(this.postParams) : {};
					
					// 显示加载中
					this.result = '请求中...';
					
					// 设置请求头
					const headers = {
						'accept': 'application/json',
						'accept-language': 'zh-CN,zh;q=0.9',
						'content-type': 'application/json',
						'origin': 'https://docwriter-test.cas-air.cn',
						'referer': 'https://docwriter-test.cas-air.cn/',
						'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36'
					};
					
					// 发送请求
					request.post(this.postUrl, params, {
						showLoading: true,
						loadingMsg: 'POST请求中',
						showSuccess: true,
						successMsg: '操作成功',
						header: headers
					})
					.then(res => {
						console.log('POST请求成功:', res);
						this.result = JSON.stringify(res, null, 2);
					})
					.catch(err => {
						console.error('POST请求失败:', err);
						this.result = '请求失败: ' + JSON.stringify(err, null, 2);
					});
				} catch (e) {
					uni.showToast({
						title: '参数格式错误，请检查JSON格式',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
	}
	
	.header {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.section {
		margin-bottom: 40rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
		color: #333;
	}
	
	.input-group {
		margin-bottom: 20rpx;
	}
	
	.input-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.input {
		border: 1px solid #ddd;
		height: 70rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.textarea {
		border: 1px solid #ddd;
		height: 180rpx;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.btn {
		margin-top: 20rpx;
	}
	
	.result-box {
		background-color: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
		border: 1px solid #eee;
	}
	
	.result-content {
		font-size: 26rpx;
		color: #333;
		word-break: break-all;
		white-space: pre-wrap;
	}
</style>
